<template>
    <div class="join-us">
        <div class="join-left animate__animated" :class="{animate__fadeInDown:animation}" v-show="animation">
            <div class="join-left-content">
                <div class="join-title f-big">{{ $t('index.join.title') }}</div>
                <div class="join-second-title f-big-second">{{ $t('index.join.secondTitle') }}</div>
                <div class="join-main-content f2">
                    {{ $t('index.join.content') }}
                </div>
                <div class="join-us-button base-button-border" @click="()=>{this.$router.push('/recruitment')}">
                    {{ $t('index.join.button') }}
                </div>
            </div>
        </div>
        <div class="join-right animate__animated" :class="{animate__fadeInUp:animation}" v-show="animation">
        </div>
    </div>
</template>

<script>
export default {
    props: ['animation'],
    name: "six"
}
</script>

<style lang="less">
.join-us {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;

    .join-left {
        width: 50%;
        background: #E3E3E3;
        display: flex;
        flex-direction: column;
        align-items: center;
        .join-left-content {
            width: 40%;
            height: 80%;
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            margin-top: 10%;
        }
    }

    .join-right {
        width: 50%;
        background: url("~@/assets/img/about-down-part1.png");
        background-size: cover;
    }

    .join-title {
		font-size: 26px;
		font-family: Microsoft YaHei;
		font-weight: 400;
		line-height: 30px;
		margin-bottom: 30px;
    }

    .join-second-title {
        color: #993C1A;
		font-size: 18px;
		font-family: Microsoft YaHei;
		font-weight: 400;
		line-height: 22px;
		margin-bottom: 30px;
    }

    .join-main-content {
        text-indent: 2rem;
        line-height: 40px;
		font-size: 14px;
		font-family: Microsoft YaHei;
		font-weight: 400;
		line-height: 26px;
    }

    .join-us-button {
        width: 20%;
        padding: 10px 40px;
        margin: 2rem 0;
    }
}
</style>

<style lang="less">
@media screen and (min-width:680px) and (max-width:1400px) {
    .six-box {
        .join-us {
            .join-left {
                .join-left-content {
                    width: 90%;
                    margin-top: 5%;
                    height: 100%;
                    .join-title {
                    }

                    .join-second-title {
                    }

                    .join-main-content {
                    }
                }
            }
        }
    }
}
</style>
